<template>
  <div>
    <h1>{{ sum }}</h1>
    <button @click="changeSum">sum加1</button>
  </div>
</template>
<script>

export default {
  data() {
    return {
      sum: 1
    }
  },
  methods: {
    changeSum() {
      this.sum = this.sum + 1
    }
  },
  beforeCreate() {
    console.log('创建前')
  },
  created() {
    console.log('创建完毕')
  },    
  beforeMount() {
    console.log('挂载前')
  },    
  mounted() {
    console.log('挂载完毕')
  },    
  beforeUpdate() {
    console.log('更新前')
  },    
  updated() {
    console.log('更新完毕')
  },    
  beforeDestroy() {
    console.log('销毁前')
  },
  destroyed() {
    console.log('销毁完毕')
  }
}
</script>